<template>
	<view class="details">
		<!-- START 头部总数据统计 -->
		<view class="details-header">
			<!-- 第一层：展示账单的关联人 -->
			<view class="header-once">
				<view class="once-picture">
					<view class="once-picture-list">
						<image class="picture-list-item" src="@/static/logo.png" mode=""></image>
					</view>
					<view class="once-picture-number">2人</view>
					<view class="once-picture-icon"></view>
				</view>
				<view class="once-button">
					<!-- 跳转图表 -->
					<view class="once-button-charts button-box">
						<view class="button-text">图表</view>
						<view class="button-icon"></view>
					</view>
					<!-- 刷新页面 -->
					<view class="once-button-refresh button-box">
						<view class="button-text">刷新</view>
						<view class="button-icon"></view>
					</view>
				</view>
			</view>
			<!-- 第二层：展示当前日期-总收入-总支出 -->
			<view class="header-second">
				<view class="second-date second-box">
					<view class="box-title">2022</view>
					<view class="box-main">8月</view>
				</view>
				<view class="second-income second-box">
					<view class="box-title">收入</view>
					<view class="box-main">5000</view>
				</view>
				<view class="second-expend second-box">
					<view class="box-title">支出</view>
					<view class="box-main">2000</view>
				</view>
			</view>
		</view>
		<!-- END 头部总数据统计 -->
		
		<!-- START 列表主体 -->
		<view class="details-content" @touchstart="handleTouchstart" @touchend="handleTouchend" @touchmove="handleTouchmove">
			<day-item v-for="(item, index) in dayList" :item="item" :key="index"></day-item>
		</view>
		<!-- END 列表主体 -->
		
		<tab-bar :selected="0"></tab-bar>
	</view>
</template>

<script>
	import dayItem from './components/dayItem.vue';
	import tabBar from '../../../components/tab_bar.vue'
	export default {
		components:{
			dayItem:dayItem,
			tabBar:tabBar
		},
		data() {
			return {
				touchS : [0,0],
				touchE : [0,0],
				dayList:[
					{
						date:'2022/08/15',
						list:[
							{
								isExpend:true, // 用于判断是否支出
								money:5000, // 金额
								iconType:'', // 设置了哪个类型图标
								typeText:'零食', // 类型名称
								remark:'', // 自定义的备注
								date:'2022/08/15' // 账单的时间点
							},
							{
								isExpend:false,
								money:5000,
								iconType:'',
								typeText:'零食',
								remark:'',
								date:'2022/08/15'
							}
						]
					},{
						date:'2022/08/16',
						list:[
							{
								isExpend:true, // 用于判断是否支出
								money:5000, // 金额
								iconType:'', // 设置了哪个类型图标
								typeText:'零食', // 类型名称
								remark:'', // 自定义的备注
								date:'2022/08/15' // 账单的时间点
							},
							{
								isExpend:false,
								money:5000,
								iconType:'',
								typeText:'零食',
								remark:'',
								date:'2022/08/15'
							}
						]
					}
				]
			};
		},
		mounted() {
			this.getNowDayList()
			
		},
		methods:{
			/**
			 * @czw 获取当前月份的数据
			 */ 
			getNowDayList(){
				const db = uniCloud.database();
				db.collection("details_bill_list").get().then(res => {
					console.log(res)
				})
				/**
				 * 新增数据
				 */ 
				return
				db.collection("details_bill_list").add({
					isExpend:true, // 用于判断是否支出
					money:5000, // 金额
					iconType:'', // 设置了哪个类型图标
					typeText:'零食', // 类型名称
					remark:'', // 自定义的备注
					date:new Date() // 账单的时间点
				}).then((res) => {
					console.log(res)
				}).catch((err) => {
					console.log(err.errMsg)
				});
			},
			/**
			 * @czw 触发屏幕开始
			 * @param {Object} e
			 */
			handleTouchstart: function(e){
				let sx = e.touches[0].pageX
				let sy = e.touches[0].pageY
				this.touchS = [sx,sy]
			},
			/**
			 * @czw 触发屏幕中
			 * @param {Object} e
			 */
			handleTouchmove: function(e){
				let sx = e.touches[0].pageX;
				let sy = e.touches[0].pageY;
				this.touchE = [sx, sy]
			},
			/**
			 * @czw 触发屏幕结束
			 * @param {Object} e
			 */
			handleTouchend: function(e){
				let start = this.touchS
				let end = this.touchE
				if(start[1] < end[1] - 50){
					console.log('下滑')
				}else if(start[1] > end[1] + 50){
					console.log('上滑')
				}else{
					console.log('静止')
				}
			},
		}
	}
</script>

<style lang="scss">
.details{
	height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 14px;
	background-color: #ffffff;
	color: #333333;
	.details-header{
		flex-shrink: 0;
		background-color: #fddc2d;
		width: 100%;
		.header-once{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px;
			box-sizing: border-box;
			.once-picture{
				display: flex;
				align-items: center;
				min-width: 100px;
				box-sizing: border-box;
				border-right: 1px solid #e1e1e1;
				.once-picture-list{
					display: flex;
					align-items: center;
					.picture-list-item{
						width: 20px;
						height: 20px;
						border-radius: 50%;
					}
				}
				.once-picture-number{}
				.once-picture-icon{}
			}
			.once-button{
				display: flex;
				.button-box{
					display: flex;
					margin-right: 15px;
					.button-text{}
					.button-icon{}
				}
				.button-box:last-child{
					margin-right: 0;
				}
			}
		}
		.header-second{
			display: flex;
			align-items: center;
			padding: 15px;
			box-sizing: border-box;
			justify-content: space-between;
			.second-box{
				.box-title{}
				.box-main{}
			}
			.second-date{
				flex-shrink: 0;
				box-sizing: border-box;
				border-right: 1px solid #e1e1e1;
				min-width: 100px;
			}
			.second-income{
				flex: 1;
				text-align: center;
			}
			.second-expend{
				flex: 1;
				text-align: center;
			}
		}
	}
	.details-content{
		flex: 1;
		overflow-y: scroll;
	}
}
</style>
